<template>
  <div v-loading="loading">
    <!--课程顶部轮播图和课程描述-->
    <course-info :course="course" />
    <!--中部课程介绍-->
    <describe :course="course" />
    <div class="detail-footer" />
  </div>
</template>

<script>
import { getCourseById } from '@/api/course'
import CourseInfo from './component/CourseInfo'
import Describe from './component/Describe'

export default {
  name: 'Detail',
  components: { CourseInfo, Describe },
  data() {
    return {
      // 课程id， url动态获取
      courseId: undefined,
      course: {},
      // 加载动画控制
      loading: true
    }
  },
  created() {
    this.getCourse(this.$route.query.csId)
  },
  methods: {
    // 根据课程id获取课程信息
    getCourse(id) {
      this.loading = true
      getCourseById(id).then(res => {
        this.course = res.data
        this.loading = false
        this.$store.commit('course/SET_CLASSIFY', this.course.classify)
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.detail-footer {
  height: 100px;
}
</style>
